<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>首页</title>
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/index/index1.css">
    <link rel="stylesheet" href="../../js/swiper/swiper.min.css">
    <script src="../../js/jquery-2.2.3.min.js"></script>
    <script src="../../js/rem.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/swiper/swiper.min.js"></script>
    <script src="../detail/js/vue.min.js"></script>
    <script src="../detail/js/vue-resource.min.js"></script>


</head>
<body>
<div id="app">

<!--    <div class="search">
        <img src="../../img/search_img.png" class="search_img" alt="">
        <input type="text" class="search_inp" placeholder="搜索你想要的商品">
    </div> -->

    <div class="swiper">
        <div class="swiper-container swiper_index">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="../../img/swiper1.jpg" alt="">
                </div>
                <!-- <div class="swiper-slide">
                    <img src="../../img/swiper2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../../img/swiper3.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../../img/swiper5.jpg" alt="">
                </div> -->
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="nav">
        <div class="nav_item">
            <img src="../../img/head-item1.png" class="head-item" alt="">
            <p class="nav-item-p">商品列表</p>
        </div>
        <!--onclick="location.href='../../aliancemerchant/index.html'"-->
        <!--<div class="nav_item">-->
            <!--<img src="../../img/head-item3.png" class="head-item" alt="">-->
            <!--<p class="nav-item-p">积分专区</p>-->
        <!--</div>-->
        <div class="nav_item" @click="jump">
            <img src="../../img/head-item4.png" class="head-item" alt="">
            <p class="nav-item-p">我要分享</p>
        </div>
    </div>

    <ul class="tab_ul">
        <li class="tab_ul_li tab_ul_li_active" @click="lingshou">商品列表</li>
        <!--<li class="tab_ul_li"  @click="yiwu">积分专区</li>-->
    </ul>
    <div class="all_cont">
        <!--零售专区-->
        <div class="cont cont_lingshou">
            <div class="lingshou_item" v-for="item in retailGoodsList" :data-id="item.goodsId" @click="goodsInfo_lingshou">
                <img :src="ImageUrl + item.goodsImg" class="l-i-i" alt="">
                <p class="l-i-p">{{item.goodsName}}</p>
                <p class="l-i-price">￥{{item.shopPrice}}</p>
            </div>
        </div>
        <!--
        &lt;!&ndash;积分专区&ndash;&gt;
        <div class="cont cont_yiwu">
            <div class="yiwu_item" v-for="item in retailGoodsList_yiwu" :data-id="item.goodsId" @click="goodsInfo_yiwu">
                <img :src="item.goodsImg" class="l-i-i" alt="">
                <p class="l-i-p">{{item.goodsName}}</p>
                <p clasnavs="l-i-price">￥{{item.shopPrice}}</p>
            </div>
        </div>
        &lt;!&ndash;抢购专区&ndash;&gt;
        <div class="cont cont_qianggou">
            <p class="q-i-p">暂未开放</p>
        </div>-->
    </div>

    <div style="height: .6rem;"></div>
    <div class="foot" style="border: 0;">
        <div class="foot-item" onclick="location.href='../index/index.html'">
            <div class="f-i-i foot11"></div>
            <p class="isactive">首页</p>
        </div>
        <!--<a href="../../aliancemerchant/index.html"></a>-->
        <!--<div class="foot-item">-->
            <!--<div class="f-i-i foot2"></div>-->
            <!--<p>积分商城</p>-->
        <!--</div>-->
        <div class="foot-item" onclick="location.href='../shopcar/indexShop.html'">
            <div class="f-i-i foot3 "></div>
            <p class="">购物车</p>
        </div>
        <div class="foot-item" onclick="location.href='../personal/index.html'">
            <div class="f-i-i isactive foot4"></div>
            <p class="">我的</p>
        </div>
    </div>
</div>
</body>
</html>
<script>
    var myApp = new Vue({
        el:'#app',
        data: {
            listImg:[],
            retailGoodsList:[],
            listImg_yiwu:[],
            retailGoodsList_yiwu:[]
        },
        mounted: function () {
            this.$nextTick(function () {
//                 this.$http.post(SURL + '/jfd/index?userId='+localStorage.getItem('userId')).then(function(res) {
//                     var isFenxiang = res.body.data.level;
//                     if(isFenxiang > 0) {
// 
//                     }
//                     this.listImg = res.body.data.goodsCatsList;
//                     this.retailGoodsList = res.body.data.retailGoodsList
//                 })
				//获取零售商品列表
				this.$http.post(SURL + '/api/xlscommodity/getCommodityInfo').then(function(res) {
                    this.listImg = res.body.data;
                    this.retailGoodsList = res.body.data;
                })
                $('.cont_yiwu').hide();
                $('.cont_qianggou').hide();
                console.log(this.listImg)
                console.log(this.retailGoodsList)
            })
            //tab选项卡
            $(document).ready(function () {
                $(".tab_ul li").mouseover(function () {
                    //通过 .index()方法获取元素下标，从0开始，赋值给某个变量
                    var _index = $(this).index();
                    //让内容框的第 _index 个显示出来，其他的被隐藏
                    $(".all_cont>.cont").eq(_index).show(500).siblings().hide(500);
                    //改变选中时候的选项框的样式，移除其他几个选项的样式
                    $(this).addClass("tab_ul_li_active").siblings().removeClass("tab_ul_li_active");
                });
            });
            // 首页轮播
            var mySwiper = new Swiper('.swiper_index', {
                autoplay: 3000,//可选选项，自动滑动
                pagination: {
                    el: '.swiper-pagination',
                },
            })
            //广告轮播
            var mySwiper_nav = new Swiper('.swiper_tab', {
                autoplay: 3000,//可选选项，自动滑动
                pagination: {
                    el: '.swiper-pagination',
                },
            })
        },
        methods: {
            //零售区商品列表
            lingshou: function() {
                this.$http.post(SURL + '/api/xlscommodity/getCommodityInfo').then(function(res) {
                    this.listImg = res.body.data.goodsCatsList;
                    this.retailGoodsList = res.body.data.retailGoodsList;
                })
                $('.cont_yiwu').hide();
                $('.cont_qianggou').hide();
            },


            //积分区商品列表
            yiwu: function () {
                this.$http.post(SURL + '/jfd/shopGoods/list').then(function(res) {
                    this.listImg_yiwu = res.body.listImg;
                    this.retailGoodsList_yiwu = res.body.list;
                })
                $('.cont_lingshou').hide();
                $('.cont_qianggou').hide();
            },
            //首页分享判断


            //零售渲染数据方法
            goodsInfo_lingshou(event){
                var _th = event.target;
                let id = '';
                if(!$(_th).parents(".lingshou_item").data("id")){
                    id = $(_th).data("id");
                }else{
                    id = $(_th).parents(".lingshou_item").data("id");
                }
                console.log(id);
                location.href = '../detail/shop-detail.html?id=' + id
            },
            goodsInfo_yiwu(event){
                var _th_yiwu = event.target;
                let id_yiwu = '';
                if(!$(_th_yiwu).parents(".yiwu_item").data("id")){
                    id_yiwu = $(_th_yiwu).data("id");
                }else{
                    id_yiwu = $(_th_yiwu).parents(".yiwu_item").data("id");
                }
                console.log(id_yiwu);
                location.href = '../detail/shop-shangjia-detail.html?id=' + id_yiwu
            },
            jump:function () {
                this.$http.post(SURL + '/jfd/index?userId='+localStorage.getItem('userId')).then(function(res) {
                    var isFenxiang = res.body.data.level;
                    if(isFenxiang == 0) {
                        alert('目前没有分享能力哦~')
                    } else {
                        window.location.href='../my_invitation.html'
                    }
                    this.listImg = res.body.data.goodsCatsList;
                    this.retailGoodsList = res.body.data.retailGoodsList
                })
            }
        }
    })
</script>
